var Tab = class{
    //box为tab的盒子，option为选择区，view为展示区,
    //obj1为选择区选中样式的样式对象，obj1为选择区未选中样式的样式对象
    constructor(box,option,view,obj1,obj2,ways){
        //自执行函数使选择区和展示区的第一个默认选中
            (function(){
                view[0].style.display = "block";
                //将obj1中的属性遍历，并添加到style中
                    for(var i in obj1){
                        option[0].style[i] = obj1[i]
                    }
            }())

        //遍历所有选择区元素，绑定点击事件
            for(var i=0 ;i<option.length;i++){
                //通过自执行函数将i传入点击事件中，运用闭包的原理
                option[i].onclick = (function(a){
                    var i = a;
                    function clickTab(){
                        //将li和p的样式清除
                            for(var j=0 ;j<option.length;j++){
                             //将obj1中的属性遍历，并添加到style中
                                for(var k in obj2){
                                    option[j].style[k] = obj2[k]
                                }
                                view[j].style.display = "none"
                            }
                        //改变点击的选择区样式
                            //将obj1中的属性遍历，并添加到style中
                            for(var g in obj1){
                                option[i].style[g] = obj1[g]
                            }
                        //改变对应的展示区的样式
                            view[i].style.display = "block"
                    }
                    return clickTab
                }(i))


            }
    }
}
export {
    Tab
} 